<!--
 * @Author: Smthie Smthie@qq.com
 * @Date: 2024-05-20 09:12:05
 * @LastEditors: Smthie Smthie@qq.com
 * @LastEditTime: 2024-05-30 15:15:16
 * @FilePath: \ProtocolTool\src\renderer\src\views\Manual\Socket\RealTimeData.vue
-->
<script lang="ts" setup>
import { ref } from 'vue'
import { useSocketStoreHook } from '@/store/modules/websocket'
import Status from '@/components/TestStatus/index.vue'
import TextDataBox from '@/components/TextDataBox/index.vue'
import { socketRealTimeDataAPI } from '@/api/Manual'

const props = defineProps({
  device: String
})
const useSocketStore = useSocketStoreHook()
const liveStatus = ref(false)
const status = ref('')
const list = ref<any>([])

let topic
const resultStatus = ref(0)

const subscribe = () => {
  topic = useSocketStore.stompClient.subscribe('/topic/realTime', (msg: any) => {
    const res = JSON.parse(msg.body)
    resultStatus.value = res.resultStatus

    console.log(res)
    if (res.testItem !== 22 || res.clientId !== props.device) return
    status.value = res.resultStatus === 200 ? 'success' : 'fail'
    const oldItem = list.value.find((item: any) => item.itemId === res.itemId)
    if (oldItem) {
      oldItem.data = res.responseData ? res.responseData.replaceAll('\n', '<br/>') : null
      oldItem.msg = res.result
    } else {
      list.value.unshift({
        id: list.value.length ? list.value[0].id + 1 : 1,
        itemId: res.itemId,
        time: Date.now(),
        requestData: res.requestData ? res.requestData.replaceAll('\n', '<br/>') : null,
        data: res.responseData ? res.responseData.replaceAll('\n', '<br/>') : null,
        msg: res.result,
        resultStatus
      })
    }
  })
}
const unsubscribe = () => {
  topic?.unsubscribe()
}

const toggle = () => {
  if (liveStatus.value) {
    subscribe()
    socketRealTimeDataAPI({ clientId: props.device }).catch(() => {
      unsubscribe()
      liveStatus.value = false
    })
  } else {
    unsubscribe()
  }
}

onUnmounted(() => {
  unsubscribe()
})
</script>
<template>
  <div>
    <div>
      <div class="title">实时测量数据</div>
      <div class="desc">
        实时传输地球物理专用设备产生的测量数据，包括长度、采样时间、台站代码、设备ID、采样率、通道个数、通道测项分量代码、按通道顺序及采样次序排列的观测数据等。
      </div>
    </div>

    <div class="content">
      <div class="live-data-card">
        <div class="header">
          <div class="result">
            <div class="result-title">测试结果</div>
            <div class="result-value">
              <Status :status />
            </div>
          </div>
          <div class="title">实时测量数据传输</div>
          <a-switch
            v-model:checked="liveStatus"
            checked-children="开"
            un-checked-children="关"
            @change="toggle"
          />
        </div>
        <div class="main">
          <div class="data-box" style="height: 374px">
            <TextDataBox :list />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.title {
  font-weight: 500;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.88);
  line-height: 28px;
}

.desc {
  font-weight: 400;
  font-size: 14px;
  color: #909399;
  line-height: 22px;
  margin: 6px 0 16px;
}

.content {
  .live-data-card {
    background: #fff;
    border-radius: 4px;

    .header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .result {
        display: flex;
        align-items: center;
        margin-right: 20px;

        &-title {
          font-weight: 600;
          font-size: 16px;
          margin-right: 10px;
        }

        &-value {
          width: 90px;
          height: 28px;
        }
      }
      .title {
        font-weight: 500;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 24px;
        margin-right: 16px;
      }
    }
  }
}
.ant-btn-primary {
  background-color: rgb(0, 185, 107);
}
.ant-btn-primary:not(:disabled):hover {
  color: #fff;
  background-color: #139937;
}
.ant-btn-default:not(:disabled):hover {
  color: #1a8c35;
  border-color: #139937;
}
</style>
